<template>
	<view 
		class="border font-sm px-2 py-1 rounded-10" 
		:class="seconds==props.seconds?'font-theme-color border-theme':'text-grey border'"
	>
		{{seconds==props.seconds?'获取验证码':seconds}}
	</view>
</template>

<script setup>
defineOptions({
	name: 'TllCountdown'
})	
import { ref } from 'vue'
const props = defineProps({
	seconds: {
		type: Number,
		default: 60
	},
})
const seconds = ref(props.seconds)
const emit = defineEmits(['timeup'])
let timer=null

const start = () => {
	if (timer) {
		return
	}
	timer = setInterval(() => {
		seconds.value -= 1;
		if (seconds.value <= 0) {
			clearInterval(timer)
			seconds.value = props.seconds
			timer=null
			emit('timeup')
		}
	}, 1000)
}
defineExpose({
	start
})

</script>

<style lang="scss">

</style>